<template>
  <div>
    <div class="text-right mb-2">
      <el-button size="small" :disabled="loading" @click="handleFlow">流程</el-button>

      <el-button
        size="small"
        icon="el-icon-printer"
        v-show="!editable"
        :disabled="loading"
        @click="handlePrint"
      >
        打印
      </el-button>
      <el-button
        size="small"
        icon="el-icon-printer"
        v-show="!editable"
        :disabled="loading"
        @click="onExportExcel"
      >
        导出
      </el-button>
    </div>

    <div ref="approvalRef" v-loading="loading" :id="printId">
      <table class="table vertical-align-middle text-center approve-table">
        <colgroup>
          <col width="16%" />
          <col width="34%" />
          <col width="16%" />
          <col width="34%" />
        </colgroup>
        <tbody>
          <tr>
            <td colspan="4" class="text-center border-0">
              <h5 class="m-0">项目审批表</h5>
            </td>
          </tr>
        </tbody>
      </table>
      <approve-info
        :view-mode="viewMode"
        :query-id="queryId"
        :print-able="false"
        @back="getRelatedData"
      ></approve-info>

      <template v-for="(approve, index) of approval">
        <component
          v-if="approve.show"
          v-bind="$attrs"
          :key="index"
          :is="approve.cmpt"
          :view-mode="viewMode"
          :related-data="related"
          :approve-data="approve"
          @success="handleSuccess"
          @dismiss="handleDismiss"
        ></component>
      </template>
    </div>

    <flow-dialog title="项目调查" :visible.sync="flowVisible" :flow-key="flowKey"></flow-dialog>
  </div>
</template>

<script>
import { printA4, excelTablesExport, domHasClass } from '@vimi/utils-tool'

import ApproveInfo from '@/bank/views/business/hplimit/ProjectDetail'
import ApproveCommon from '@/bank/views/business/hplimit/approve/components/ApproveCommon'

import FlowDialog from '@/credit/components/flow/ViewDialog'
import { getApprove } from '@/credit/mixin/wf'
export default {
  components: {
    ApproveInfo,
    ApproveCommon,
    FlowDialog,
  },
  props: {
    queryId: {
      type: String,
      required: true,
    },
    viewMode: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      related: {},
      approval: [],
      flowKey: 'BANK_APPROVAL',
      flowVisible: false,
    }
  },
  computed: {
    printId() {
      return `project-approve-${this.queryId}`
    },
    editable() {
      return !this.viewMode && this.approval.some(it => it.editable)
    },
    isUnion() {
      return this.$store.getters.user.scopeArr?.includes('dirGuaPro') ?? false
    },
  },
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    onExportExcel() {
      this.loading = true
      excelTablesExport(this.printId, this.fileName, {
        styles: {
          // 全局样式
          border: {
            left: { style: 'thin' },
            top: { style: 'thin' },
            right: { style: 'thin' },
            bottom: { style: 'thin' },
          },
          alignment: {
            vertical: 'center',
            horizontal: 'center',
            wrapText: true,
          },
        },
        // 单元格样式，最顶级设置(styles -> dataset -> cellStyles)
        // 可以设置成 A1，或 'r-c' 的主键
        cellStyles: {},
        cols: [{ wch: 31 }, { wch: 31 }, { wch: 31 }, { wch: 31 }],
        cellHandler: ({ td, tr }) => {
          const style = {}
          if (domHasClass(tr, 'report-gray') || domHasClass(td, 'report-gray')) {
            style.fill = { fgColor: { rgb: 'FFA6A6A6' } }
          }
          if (domHasClass(tr, 'font-weight-bold') || domHasClass(td, 'font-weight-bold')) {
            style.font = { bold: true }
          }
          if (domHasClass(td, 'text-danger')) {
            if (!style.font) style.font = {}
            style.font.color = { rgb: 'FFFF0000' }
          }

          return { style }
        },
      })
        .catch(err => {
          const msg = (err && err.message) || ''
          this.$message.error(`导出失败，请重试！${msg}`)
        })
        .finally(() => {
          this.loading = false
        })
    },
    getRelatedData(data) {
      this.related = data
    },
    getData() {
      const { queryId } = this
      if (!queryId) {
        return
      }

      this.loading = true
      return getApprove(
        { wfKey: this.flowKey, queryId: this.queryId, config: {} },
        this.$store.getters.user
      )
        .then(approval => {
          const data = approval[0] ?? {}
          const rekey = data.process?.wfn_key ?? null
          this.approval = approval.map(item => {
            if (item.process?.wfn_key !== rekey) {
              item.rekey = rekey
            }
            // else {
            //   item.rekey = 'toEdit'
            // }
            return item
          })
        })
        .finally(() => {
          this.loading = false
        })
    },

    handleSuccess(res) {
      this.$emit('success', res)
    },

    handleDismiss() {
      this.$emit('dismiss')
    },

    handlePrint() {
      printA4(
        this.$refs.approvalRef.innerHTML,
        `
        .vertical-align-middle td {vertical-align: middle;}
        .option {min-height: 7rem;}
      `
      )
    },

    handleFlow() {
      this.flowVisible = true
    },
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
